<template>
  <div class="app-container" id="groupApplyCheckAdd">
    <div class="module-box">
      <el-form ref="collectiveApplyVo" :model="validateForm.collectiveApplyVo" :rules="rules.collectiveApplyVo" class="form form-item-small" :label-position="'top'">
        <div class="module-item">
          <div class="module-item-title">
            <span class="tit">基本信息</span>
          </div>
          <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="集体名称：" prop="applicantName">
                <el-input v-model="validateForm.collectiveApplyVo.applicantName" placeholder="请填写集体名称"></el-input>
              </el-form-item>
              <el-form-item label="组织机构代码证号：" prop="applicantNum">
                <el-input v-model="validateForm.collectiveApplyVo.applicantNum" placeholder="请填写组织机构代码证号"></el-input>
              </el-form-item>
              <el-form-item label="通讯地址：" prop="address">
                <!-- <el-cascader @change="changeArea1" style="width: 300px" v-model="regionArr" :props="props"></el-cascader> -->
                <el-input v-model="validateForm.collectiveApplyVo.address" placeholder="请填写通讯地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="联系人姓名：" prop="contactName">
                <el-input v-model="validateForm.collectiveApplyVo.contactName" placeholder="请填写联系人姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系人手机号码：" prop="mobilePhone">
                <el-input v-model="validateForm.collectiveApplyVo.mobilePhone" placeholder="请填写联系人手机号码"></el-input>
              </el-form-item>
              <el-form-item label="座机号码：">
                <el-input v-model="validateForm.collectiveApplyVo.fixedPhone" placeholder="请填写座机号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="代表人：" prop="representName">
                <el-input v-model="validateForm.collectiveApplyVo.representName" placeholder="请填写代表人"></el-input>
              </el-form-item>
              <el-form-item label="代表人身份证号：" prop="representNum">
                <el-input v-model="validateForm.collectiveApplyVo.representNum" placeholder="请填写代表人身份证号"></el-input>
              </el-form-item>
              <el-form-item label="区域：" prop="regionId">
                <el-cascader ref="cascaderAddr" @change="changeArea" placeholder="--请选择--" v-model="regionArr" :props="props"></el-cascader>
              </el-form-item>
            </el-col>
          </div>
        </div>
        <div class="module-item">
          <div class="module-item-title">
            <span class="tit">账户信息</span>
          </div>
          <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="户名：" prop="accountName">
                <el-input v-model="validateForm.collectiveApplyVo.accountName" placeholder="请填写户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="账号：" prop="accountNum">
                <el-input v-model="validateForm.collectiveApplyVo.accountNum" placeholder="请填写开户行账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="开户行：" prop="accountBank">
                <el-input v-model="validateForm.collectiveApplyVo.accountBank" placeholder="请填写开户行"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </div>
        <div class="module-item">
          <div class="module-item-title">
            <span class="tit">权证信息</span>
          </div>
          <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="证件类型：" prop="certificateTypeId">
                <el-select v-model="validateForm.collectiveApplyVo.certificateTypeId" placeholder="--请选择--">
                  <el-option v-for="(item, index) in CERTIFICATE_TYPE" :key="index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="证件号码：" prop="certificateNum">
                <el-input v-model="validateForm.collectiveApplyVo.certificateNum" placeholder="请填写证件号码"></el-input>
              </el-form-item>
              <el-form-item class="layout-line" label="是否愿意预留农村发展指标：" prop="isRemain">
                <el-select v-model="validateForm.collectiveApplyVo.isRemain" placeholder="--请选择--">
                  <el-option label="是" value="YES"></el-option>
                  <el-option label="否" value="NO"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="权利人：" prop="obligeeName">
                <el-input v-model="validateForm.collectiveApplyVo.obligeeName" placeholder="请填写权利人"></el-input>
              </el-form-item>
              <el-form-item label="发证时间：" prop="issueCertificateDate">
                <el-date-picker value-format="yyyy-MM-dd" v-model="validateForm.collectiveApplyVo.issueCertificateDate" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="8" :lg="8">
              <el-form-item label="土地使用权面积：" prop="landArea">
                <el-input v-model="validateForm.collectiveApplyVo.landArea" placeholder="请填写土地使用权面积">
                  <span slot="suffix">㎡</span>
                </el-input>
              </el-form-item>
              <el-form-item label="土地坐落：" prop="landAddress">
                <el-input v-model="validateForm.collectiveApplyVo.landAddress" placeholder="请填写土地坐落"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </div>
      </el-form>
      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">附件信息</span>
        </div>
        <div class="module-item-content" style="padding-top:10px;overflow: hidden;">
          <el-table :data="fileList" highlight-current-row>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="type" label="类型" width="400"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <upload @beforeUpload="handleBeforeUpload" @res="handleUpload($event, scope.$index)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-form ref="collectiveTownAuditVo" :model="validateForm.collectiveTownAuditVo" :rules="rules.collectiveTownAuditVo" class="form">
        <div class="module-item">
          <div class="module-item-title">
            <span class="tit">附件信息审核</span>
          </div>
          <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
            <div class="form-inline-item">
              <el-form-item class="fujianShenClass" label="1、集体经济组织民主决策程序审查同意证明材料审核" prop="attachment1Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment1Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="fujianShenClass" label="2、身份证正面审核" prop="attachment2Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment2Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="fujianShenClass" label="3、身份证反面审核" prop="attachment3Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment3Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="fujianShenClass" label="4、权证证明审核" prop="attachment4Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment4Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="module-item">
          <div class="module-item-title">
            <span class="tit">审核信息 - 乡镇街道意见</span>
          </div>
          <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
            <div class="form-inline-item">
              <el-form-item label="1、申请人信息是否属实？" prop="option1Audit">
                <el-radio-group @change="changeType($event,1)" v-model="validateForm.collectiveTownAuditVo.option1Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option1Explain" v-if="option1Type">
                <el-input type="textarea" v-model="validateForm.collectiveTownAuditVo.option1Explain" />
              </el-form-item>
              <el-form-item label="2、代表人信息是否属实？" prop="option2Audit">
                <el-radio-group @change="changeType($event,2)" v-model="validateForm.collectiveTownAuditVo.option2Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option2Explain" v-if="option2Type">
                <el-input type="textarea" v-model="validateForm.collectiveTownAuditVo.option2Explain" />
              </el-form-item>
              <el-form-item label="3、土地权属关系是否真实有效？" prop="option3Audit">
                <el-radio-group @change="changeType($event,3)" v-model="validateForm.collectiveTownAuditVo.option3Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option3Explain" v-if="option3Type">
                <el-input type="textarea" v-model="validateForm.collectiveTownAuditVo.option3Explain" />
              </el-form-item>
              <el-form-item label="4、申请资料要件是否齐全？" prop="option4Audit">
                <el-radio-group @change="changeType($event,4)" v-model="validateForm.collectiveTownAuditVo.option4Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option4Explain" v-if="option4Type">
                <el-input type="textarea" v-model="validateForm.collectiveTownAuditVo.option4Explain" />
              </el-form-item>
              <el-form-item label="5、申请复垦的宅基地是否在城镇扩展边界之外？" prop="option5Audit">
                <el-radio-group @change="changeType($event,5)" v-model="validateForm.collectiveTownAuditVo.option5Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option5Explain" v-if="option5Type">
                <el-input type="textarea" v-model="validateForm.collectiveTownAuditVo.option5Explain" />
              </el-form-item>
              <el-form-item label="6、申请人填写信息是否完整规范准确？" prop="option6Audit">
                <el-radio-group @change="changeType($event,6)" v-model="validateForm.collectiveTownAuditVo.option6Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option6Explain" v-if="option6Type">
                <el-input type="textarea" v-model="validateForm.collectiveTownAuditVo.option6Explain" />
              </el-form-item>
            </div>
            <div class="layout-box">
              <el-divider></el-divider>
              <span class="title">乡镇经过审查</span>
              <el-form-item label="是否同意上报：" prop="auditResult" label-width="120px">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.auditResult">
                  <el-radio label="APPROVED">同意</el-radio>
                  <el-radio label="REJECTED">不同意</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="审核人姓名：" prop="auditUserId" label-width="120px">
                <el-select @change="handleAuditUserChange($event)" placeholder="--请选择--" v-model="validateForm.collectiveTownAuditVo.auditUserId">
                  <el-option v-for="(item, index) in auditorData" :key="index" :label="item.name" :value="item.userId" />
                </el-select>
              </el-form-item>
              <el-form-item label="审核人职务：" label-width="120px">
                <el-input readonly v-model="auditorItem1.position" placeholder="请选择审核人" />
              </el-form-item>
              <el-form-item label="联系电话：" label-width="120px" prop="phone">
                <el-input readonly v-model="validateForm.collectiveTownAuditVo.phone" placeholder="请选择审核人" />
              </el-form-item>
              <el-form-item label="审核日期：" prop="auditTime" label-width="120px">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="--请选择--" v-model="validateForm.collectiveTownAuditVo.auditTime"></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="submit-box">
      <el-button @click="handleSubmit" type="primary">提交</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import upload from "@/views/upload";
import { queryAllAuditor, getLandApplyType, getRegionListByParentId, individualApplySubmit,getTowmAndVillageInfo } from "@/api/project/fksqtc/groupApplyCheck";

export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, value } = node;
          getRegionListByParentId({ parentId: value||1 }).then(res => {
            const nodes = res.data.map(item => ({
              value: item.id,
              label: item.name,
              leaf: level >= 2
            }));
            resolve(nodes);
          });
        }
      },
      regionArr: null,
      CERTIFICATE_TYPE: [],
      btnLoading: false,
      fileList: [{ type: "集体经济组织民主决策程序审查同意证明材料" }, { type: "身份证正面" }, { type: "身份证反面" }, { type: "权证证明" }],
      auditorItem1: {},
      btn: {
        bj: { name: "查看", way: "on-lookClick" },
        sc: { name: "下载", way: "on-xzClick" }
      },
      head: {
        date: "证件类型"
      },
      auditorData: [],
      tableData: [],
      option1Type: false,
      option2Type: false,
      option3Type: false,
      option4Type: false,
      option5Type: false,
      option6Type: false,
      loading: false,
      way: this.$route.query.way,
      validateForm: {
        collectiveApplyVo: {
          landId: 1,
          applicantName: "",
          applicantNum: "",
          representName: "",
          representNum: "",
          contactName: "",
          fixedPhone: "",
          mobilePhone: "",
          address: "",
          accountBank: "",
          accountName: "",
          accountNum: "",
          certificateTypeId: "",
          certificateNum: "",
          issueCertificateDate: "",
          landArea: "",
          obligeeName: "",
          landAddress: "",
          isRemain: "YES",
          attachment1Id: "",
          attachment2Id: "",
          attachment3Id: "",
          attachment4Id: "",
          regionId: ""
        },
        collectiveTownAuditVo: {
          landId: 2,
          auditTime: null,
          auditUserId: null,
          phone:null,
          attachment1Audit: "YES",
          attachment2Audit: "YES",
          attachment3Audit: "YES",
          attachment4Audit: "YES",
          option1Audit: "YES",
          option1Explain: "",
          option2Audit: "YES",
          option2Explain: "",
          option3Audit: "YES",
          option3Explain: "",
          option4Audit: "YES",
          option4Explain: "",
          option5Audit: "YES",
          option5Explain: "",
          option6Audit: "YES",
          option6Explain: "",
          auditResult: "APPROVED"
        }
      },
      rules: {
        collectiveApplyVo: {
          applicantName: [{ required: true, message: "请完善信息" }],
          applicantNum: [{ required: true, message: "请完善信息" }],
          representName: [{ required: true, message: "请完善信息" }],
          representNum: [{ required: true, message: "请完善信息" }],
          contactName: [{ required: true, message: "请完善信息" }],
          mobilePhone: [{ required: true, message: "请完善信息" }],
          address: [{ required: true, message: "请完善信息" }],
          accountBank: [{ required: true, message: "请完善信息" }],
          accountName: [{ required: true, message: "请完善信息" }],
          accountNum: [{ required: true, message: "请完善信息" }],
          certificateTypeId: [{ required: true, message: "请完善信息" }],
          certificateNum: [{ required: true, message: "请完善信息" }],
          issueCertificateDate: [{ required: true, message: "请完善信息" }],
          landArea: [{ required: true, message: "请完善信息" }],
          obligeeName: [{ required: true, message: "请完善信息" }],
          landAddress: [{ required: true, message: "请完善信息" }],
          isRemain: [{ required: true, message: "请完善信息" }],
          regionId: [{ required: true, message: "请完善信息", trigger: "blur" }]
        },
        collectiveTownAuditVo: {
          attachment1Audit: [{ required: true, message: "请完善信息" }],
          attachment2Audit: [{ required: true, message: "请完善信息" }],
          attachment3Audit: [{ required: true, message: "请完善信息" }],
          attachment4Audit: [{ required: true, message: "请完善信息" }],
          auditTime: [{ required: true, message: "请完善信息" }],
          auditUserId: [{ required: true, message: "请完善信息" }],
          phone: [{ required: true, message: "请完善信息" }],
          option1Audit: [{ required: true, message: "请完善信息" }],
          option1Explain: [{ required: true, message: "请完善信息" }],
          option2Audit: [{ required: true, message: "请完善信息" }],
          option2Explain: [{ required: true, message: "请完善信息" }],
          option3Audit: [{ required: true, message: "请完善信息" }],
          option3Explain: [{ required: true, message: "请完善信息" }],
          option4Audit: [{ required: true, message: "请完善信息" }],
          option4Explain: [{ required: true, message: "请完善信息" }],
          option5Audit: [{ required: true, message: "请完善信息" }],
          option5Explain: [{ required: true, message: "请完善信息" }],
          option6Audit: [{ required: true, message: "请完善信息" }],
          option6Explain: [{ required: true, message: "请完善信息" }],
          auditResult: [{ required: true, message: "请完善信息" }]
        }
      }
    };
  },
  components: {
    upload
  },
  computed: {
  　　areaValue(){
  　　　　return this.validateForm.collectiveApplyVo.regionId
  　　}
  },
  watch: {
    regionArr(arr) {
      this.validateForm.collectiveApplyVo.regionId = arr[2];
    },
    areaValue(){
      this.getTowmVillageData(this.validateForm.collectiveApplyVo.regionId)
    },
  },
  created() {
    this.validateForm.collectiveTownAuditVo.auditTime = this.getTime();
    this.queryAllAuditor();
    this.getSelectData();
  },
  methods: {
    //改变区域
    changeArea(value){
      var that=this
      setTimeout(function(){
        var arr=[]
        arr=that.$refs['cascaderAddr'].inputValue.split("/");
        that.validateForm.collectiveApplyVo.address =  arr.join("").replace(/\s/g, "")
        
      },10)
    },
    //获取镇村社
    getTowmVillageData(id){
      var data={
        applyType:'COLLECTIVE',
        areaId:id,
      }
      getTowmAndVillageInfo(data).then(res=>{
        console.log(res,"镇村社")
        this.auditorData=res.data.collectiveTownUserDto
        
      })
    },
    //最终提交
    handleSubmit() {
      this.btnLoading = true;
      let flag1 = false;
      let flag2 = false;
      let uploadFlag = false;
      this.$refs["collectiveApplyVo"].validate(valid => {
        flag1 = valid;
      });
      this.$refs["collectiveTownAuditVo"].validate(valid => {
        flag2 = valid;
      });
      if (this.validateForm.collectiveApplyVo.attachment1Id == "") {
        this.$alert("请上传集体经济组织民主决策程序审查同意证明材料");
        return;
      }
      if (this.validateForm.collectiveApplyVo.attachment2Id == "") {
        this.$alert("请上传代表人身份证正面");
        return;
      }
      if (this.validateForm.collectiveApplyVo.attachment3Id == "") {
        this.$alert("请上传代表人身份证反面");
        return;
      }
      if (this.validateForm.collectiveApplyVo.attachment4Id == "") {
        this.$alert("请上传权证证明");
        return;
      }
      if (flag1 && flag2) {
        individualApplySubmit(this.validateForm)
          .then(res => {
            if(res.code==1000){
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$router.back(-1)
            }
          })
          .catch(error => {
            this.btnLoading = false;
          });
      } else {
        this.$alert("还有未完善的信息")
          .then(_ => {})
          .catch(_ => {});
        this.this.btnLoading = false;
      }
    },
    //改变状态
    changeType(v, type) {
      switch (type) {
        case 1:
          this.option1Type = v == "YES" ? false : true;
          if (v == "YES") {
            this.validateForm.collectiveTownAuditVo.option1Explain = "";
          }
          break;
        case 2:
          this.option2Type = v == "YES" ? false : true;
          if (v == "YES") {
            this.validateForm.collectiveTownAuditVo.option2Explain = "";
          }
          break;
        case 3:
          this.option3Type = v == "YES" ? false : true;
          if (v == "YES") {
            this.validateForm.collectiveTownAuditVo.option3Explain = "";
          }
          break;
        case 4:
          this.option4Type = v == "YES" ? false : true;
          if (v == "YES") {
            this.validateForm.collectiveTownAuditVo.option4Explain = "";
          }
          break;
        case 5:
          this.option5Type = v == "YES" ? false : true;
          if (v == "YES") {
            this.validateForm.collectiveTownAuditVo.option5Explain = "";
          }
          break;
        case 6:
          this.option6Type = v == "YES" ? false : true;
          if (v == "YES") {
            this.validateForm.collectiveTownAuditVo.option6Explain = "";
          }
          break;
      }
    },
    //修改地址1-通讯地址
    changeArea1(val) {},
    getSelectData() {
      let arr = ["RECLAIM_TYPE", "RECLAIM_WHERE", "CERTIFICATE_TYPE"];
      arr.forEach((item, index) => {
        getLandApplyType({
          dictionaryType: item
        }).then(res => {
          this[arr[index]] = res.data;
        });
      });
    },
    handleBeforeUpload(e) {
      this.btnLoading = true;
    },
    handleUpload(res, index) {
      this.btnLoading = false;
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.validateForm.collectiveApplyVo["attachment" + (index + 1) + "Id"] = res.data.id;
    },
    getTime() {
      var timeStr = "-";
      var curDate = new Date();
      var curYear = curDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var curMonth = curDate.getMonth() + 1 < 10 ? "0" + (curDate.getMonth() + 1) : curDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var curDay = curDate.getDate() < 10 ? "0" + curDate.getDate() : curDate.getDate(); //获取当前日(1-31)
      var curHour = curDate.getHours() < 10 ? "0" + curDate.getHours() : curDate.getHours(); //获取当前小时数(0-23)
      var curMinute = curDate.getMinutes() < 10 ? "0" + curDate.getMinutes() : curDate.getMinutes(); // 获取当前分钟数(0-59)
      var curSec = curDate.getSeconds() < 10 ? "0" + curDate.getSeconds() : curDate.getSeconds(); //获取当前秒数(0-59)
      var Current = curYear + timeStr + curMonth + timeStr + curDay;
      return Current;
    },
    queryAllAuditor() {
      // queryAllAuditor().then(res => {
      //   this.auditorData = res.data;
      // });
    },
    handleAuditUserChange(val, type) {
      this.auditorData.forEach(item => {
        if (item.userId == val) {
          this.auditorItem1 = item;
          this.validateForm.collectiveTownAuditVo.phone = item.mobilePhone
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    lookClick(item) {},
    xzClick(item) {},
    handleCancel() {
      this.$confirm("此操作将返回上一页, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.push({ name: "集体申请与审核" });
        })
        .catch(() => {});

    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.module-item {
  width: 100%;
  background-color: #fff;
}

.module-item-title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}

.module-item-content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}

.form {
  /deep/ .el-input {
    width: 200px;
  }
}

.submit-box {
  text-align: left;
  margin-top: 20px;
}

.layout-box {
  /deep/ .el-form-item__label {
    width: 150px !important;
  }

  /deep/ .el-form-item__content {
    margin-left: 150px !important;
  }

  .title {
    display: inline-block;
    color: #48494d;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
  }
}

.form-inline-item {
  .explain {
    /deep/ .el-form-item__label {
      width: 70px !important;
    }

    /deep/ .el-textarea {
      width: 500px;
      margin-left: 0;
    }
  }

  /deep/ .el-form-item__label {
    width: 350px !important;
    text-align: left;
  }

  /deep/ .el-input {
    margin-left: 20px;
  }

  .fujianShenClass {
    /deep/ .el-form-item__label {
      width: 400px !important;
      text-align: left;
    }
  }
}
</style>
 
